<template>
  <div class="card-item clearfix" :class="{cannot}" @click="callback(item)">
    <div class="left tac h100 fl flex-col jce">
      <div :class="'num ' + (item.reward_discount * 1 ? 'after' : 'before')">{{
        item.reward_price / 100 || item.reward_discount * 1 || 0
        }}
      </div>
      <div>{{item.reward_discount * 1 ? '优惠券' : '抵用券'}}</div>
    </div>
    <div class="right h100 fl bsb por">
      <div class="name">{{
        item.reward_discount * 1 || item.reward_price / 100 || 0
        }}{{
        item.reward_discount * 1 ? '折优惠券' : '元抵用券'
        }}
      </div>
      <div class="range li">适用范围：<span class="value">{{item.use_range}}</span></div>
      <div class="term li">使用期限：<span class="value">{{item.start_time}}-{{item.end_time}}</span></div>
      <div class="check-box abs-m bdr50 tac" :class="{active}">
        <van-icon name="success dn"></van-icon>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "DiscountCard",
    props: {
      cannot: {
        type: Boolean,
        default: false,
      },
      active: {
        type: Boolean,
        default: false,
      },
      item: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    methods: {
      callback(item) {
        this.cannot || this.$emit('check', item);
      }
    },

  }
</script>

<style scoped lang="less">
  .cannot {
    &.card-item {
      background-image: url(../images/bg_youhuiquan_g.png);
    }
    .check-box {
      display: none;
    }
    .right {
      .li {
        &:before {
          background-color: #999;
        }
      }
    }
  }

  .card-item {
    background: url(../images/bg_youhuiquan_n.png) no-repeat top left / 100% 100%;
    height: 6.25rem;
    line-height: 1;
    + .card-item {
      margin-top: .94rem;
    }
  }

  .left {
    width: 6.25rem;
    color: #fff;
    font-size: .94rem;
    .num {
      font-size: 2.19rem;
      &:before, &:after {
        content: '';
        font-size: 1.13rem;
      }
      &.before {
        &:before {
          content: '￥';
        }
      }
      &.after {
        &:after {
          content: '折';
        }
      }
    }
  }

  .right {
    border-radius: .27rem;
    padding: 1.19rem 0 0 .97rem;
    width: 15.3rem;
    color: #999;
    font-size: .75rem;
    .check-box {
      right: .63rem;
      width: 1rem;
      height: 1rem;
      color: #fff;
      border: #ccc solid .06rem;
      &.active {
        border: 0;
        background-color: #ff8611;
        .van-icon {
          line-height: 1rem;
          display: block;
        }
      }
    }
    .name {
      margin-bottom: .97rem;
      font-size: 1.13rem;
      color: #333;
    }
    .li {
      & + .li {
        margin-top: .5rem;
      }
      &:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        margin-right: .25rem;
        width: .31rem;
        height: .31rem;
        background-color: #ff8611;
        border-radius: 50%;
        opacity: .3;
      }
    }
    .value {
      color: #666;
    }
  }
</style>
